<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import { GroupOption } from '../normal-type'

@Component({
  name: 'RenderCheckbox'
})
export default class extends Vue {
  @Prop({ type: Array })
  private value!: Array<any>
  // options
  @Prop({ type: Array, required: false, default: () => [] })
  private options!: Array<GroupOption>
  // whether to use button styles
  @Prop({ type: Boolean, required: false, default: false })
  private isButton!: boolean

  render (h: CreateElement) {
    let child = this.isButton ? 'el-checkbox-button' : 'el-checkbox'
    let options = this.options.map(_ =>
      h(child, { props: { ..._, label: _.value } }, _.text)
    )
    return h(
      'el-checkbox-group',
      {
        attrs: this.$attrs,
        props: { ...this.$attrs, value: this.value || [] },
        on: {
          ...this.$listeners,
          input: (v: Array<any>) => {
            this.$emit('input', v)
          }
        }
      },
      options
    )
  }
}
</script>
